<template>
    <div class="vueChartMain">
        <el-container style="text-align: center;height: 90%;width: 60%;margin: 0 auto;padding-top: 10%">
            <el-aside width="25%">
                <el-container>
                    <el-header>
                        <el-input
                                width="20px"
                                placeholder="搜索"
                                prefix-icon="el-icon-search"
                                suffix-icon="el-icon-close"
                                v-model="searchInput">
                            <template slot="append">
                                <el-button icon="el-icon-plus"></el-button>
                            </template>
                        </el-input>
                    </el-header>
                    <el-main>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">
                            <template v-for="(item,index) in leftUserArray">
                                <el-menu-item :key="index" style="height: 70px">
                                    <el-row :gutter="20">
                                        <el-col :span="8">
                                            <img :src="item.imgUrl" width="40" height="40">
                                        </el-col>
                                        <el-col :span="16" style="text-align: left">
                                            <span style="font-size: 16px">{{ item.username }}</span>
                                        </el-col>
                                    </el-row>
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </el-main>
                </el-container>
            </el-aside>
            <el-container>
                <el-header style="background-color: #f5f0f0">
                    <el-row :gutter="20" style="margin-top: 20px">
                        <el-col :span="12" style="text-align: left;font-weight: bold;font-size: 20px">
                            <a href="#">乐山社保袁靖</a>
                        </el-col>
                        <el-col :span="12" style="text-align: right;">
                            <el-button icon="el-icon-s-platform"/>
                            <el-button icon="el-icon-coordinate"/>
                            <el-button icon="el-icon-folder"/>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </el-header>
                <el-main id="msgMain" style="background-color: #f5f0f0">
                    <div id="msgContent" ref="msgContent">
                        <template v-for="(item,index) in msgArray">
                            <el-row :gutter="40" :key="index" style="margin-top: 10px" v-if="index%2===0">
                                <el-col :span="3">
                                    <el-image
                                            style="width: 50px; height: 50px"
                                            :src="item.imgUrl"
                                    ></el-image>
                                </el-col>
                                <el-col :span="21" style="text-align: left">
                                    <div style="font-size: 20px;background-color: #fbfbfb;color: #000000;padding: 20px 30px;border-radius: 10px;" >
                                        {{ item.msg }}
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="40" :key="index" style="margin-top: 10px" v-if="index%2===1">
                                <el-col :span="21" style="text-align: left">
                                    <div style="
                                                font-size: 20px;background-color: #1e6eff;color: white;padding: 20px 30px;border-radius: 10px;" >
                                        {{ item.msg }}
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <el-image
                                            style="width: 50px; height: 50px"
                                            :src="item.imgUrl"
                                    ></el-image>
                                </el-col>
                            </el-row>

                        </template>
                    </div>
                </el-main>
                <el-footer style="padding: 0 0">
                    <el-input  type="textarea" v-model="msgInput" @keyup.enter.native="sendMsg" style="font-size:20px;" />
                    <el-button type="primary" style="float: right" @click="sendMsg">发送消息</el-button>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "vueChart",
        data() {
            return {
                leftUserArray: [],
                leftUser: {},
                searchInput: '',
                msgArray: [],
                msg: {},
                msgInput:''
            }
        },
        created() {
            this.leftNavUser();
            this.mainMsg();
        },
        mounted() {

        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            init() {
                this.$nextTick().then(function () {
                    this.msgBottom();
                })
            },
            leftNavUser() {
                for (let i = 0; i < 20; i++) {
                    let obj = {};
                    obj.imgUrl = 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1d67ri.img?h=533&w=799&m=6&q=60&o=f&l=fs';
                    obj.username = '导航一';
                    this.leftUserArray.push(obj);
                }
            },
            mainMsg() {
                for (let i = 0; i < 20; i++) {
                    let obj = {};
                    let msg = '';
                    obj.imgUrl = 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1d67ri.img?h=533&w=799&m=6&q=60&o=f&l=fs';
                    for (let j = 0; j < 2; j++) {
                        msg += '试零分电视里看到老师肯定发了啊啊';
                    }
                    obj.msg = msg;
                    this.msgArray.push(obj);
                }
            },
            sendMsg(){
                if( this.msgInput === '' || this.msgInput.trim() === ''){
                    return ;
                }
                let obj = {};
                obj.imgUrl = 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1d67ri.img?h=533&w=799&m=6&q=60&o=f&l=fs';
                obj.msg = this.msgInput;
                this.msgArray.push(obj);
                this.msgInput = '';
                this.msgBottom();
            },
            msgBottom(){
                setTimeout(function () {
                    let msgContent = document.getElementById('msgMain');
                    msgContent.scrollTop = msgContent.scrollHeight;
                },100)
            }
        }
    }
</script>

<style scoped>
    .vueChartMain {
        height: 100%;
        width: 100%;
    }

    /*.vueChartMain * {*/
    /*    vertical-align: middle;*/
    /*}*/
</style>
